<template>
	<view class="count">
		<view class="sech f f-j-c f-a-c">
			<input type="text" v-model="value" placeholder="请输入搜索的门店" class="inp p-l-25" @confirm="confirmFn" name=""
				id="">
		</view>
		<view class="body">
			<scroll-view scroll-y style="height: 100%;width: 100%;" @scrolltolower="towOnreachBottom">
				<view v-for="(item,index) in list" class="item m-0-a p-30 b-r-20 f f-a-c f-j-b b-f m-b-25">
					<view class="left f f-a-c">
						<image :src="item.logo" class="img m-r-20" mode=""></image>
						<view class="title">
							<view class="top">
								{{item.name}}
							</view>
							<view class="bot m-t-10">
								地址：{{item.address}}
							</view>
						</view>
					</view>
					<view class="right " @click="toggSele(item,index)">
						<image v-if="stata==index" src="/static/gou.png" class="gou" mode=""></image>
						<image v-else src="/static/weigou.png" class="gou" mode=""></image>
					</view>
				</view>
				<view class="tishi f f-a-c f-j-c m-t-35">
					<image src="/static/tishi.png" class="tishiImg m-r-20" mode=""></image> 提示：请慎重选择门店，确认选择后将不可切换门店！
				</view>
			</scroll-view>
		</view>
		<view @click="btn" class="btn">
			立即进入
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				list: [],
				stata: 0,
				value: ''
			}
		},
		onShow() {
			this.initList()
		},
		methods: {
			async initList() {
				let n = await this.$api.StoreList(this.value)
				this.list = n.data.data
				// console.log(n, '123');
			},
			toggSele(item, index) {
				this.stata = index
			},
			async btn() {
				let n = await this.$api.bind_shop({
					shop_id: this.list[this.stata].id
				})
				this.$msg(n.message)
				if (n.status) {
					setTimeout(() => {
						uni.switchTab({
							url: '/pages/index/index'
						})
					}, 1000)
				}
			},
			// 点击确认
			confirmFn(e) {
				console.log(e, '123456')
				this.value = e.detail.value
				this.initList()
			}
		}
	}
</script>

<style lang="scss">
	.btn {
		width: 90%;
		height: 88rpx;
		line-height: 85rpx;
		text-align: center;
		background: #009d85;
		border-radius: 44rpx;
		font-size: 28rpx;
		font-family: PingFang SC, PingFang SC-Bold;
		font-weight: 700;
		color: #ffffff;
		position: fixed;
		bottom: 50rpx;
		left: 50%;
		transform: translateX(-50%);
	}

	.tishi {
		font-size: 26rpx;
		font-family: PingFang SC, PingFang SC-Regular;
		font-weight: 400;
		text-align: center;
		color: #e53434;

		.tishiImg {
			width: 32rpx;
			height: 32rpx;
		}
	}

	.item {
		width: 90%;

		.gou {
			width: 44rpx;
			height: 44rpx;
		}

		.img {
			width: 96rpx;
			height: 96rpx;
			border-radius: 8rpx;
		}

		.top {
			font-size: 30rpx;
			font-family: PingFang SC, PingFang SC-Bold;
			font-weight: 700;
			color: #333333;
		}

		.bot {
			font-size: 26rpx;
			font-family: PingFang SC, PingFang SC-Regular;
			font-weight: 400;
			color: #999999;
		}
	}

	.body {
		height: calc(100vh - 120rpx);
		width: 100%;
	}

	.inp {
		width: 88%;
		height: 72rpx;
		background: #f6f6f6;
		border-radius: 36rpx;
	}

	.sech {
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		height: 104rpx;
		background: #ffffff;
		backdrop-filter: blur(40rpx);
	}

	.count {
		padding-top: 120rpx;
		height: 100vh;
		width: 100%;
	}
</style>